import { defineStore } from 'pinia' // 引入 defineStore 函数，用于定义 Pinia 状态管理库的 Store
import { ref } from 'vue' // 引入 ref 函数，用于在 Vue 中创建响应式的数据引用

// 定义 Store，使用 useMemberStore 作为 Store 的名称
export const useMemberStore = defineStore(
  'member', // Store 的 id，必须是唯一的，在整个应用程序中用来识别 Store
  () => {
    // 以下是一个箭头函数，它定义了 Store 的状态和方法

    // 会员信息，使用 ref() 创建一个响应式引用，类型为 any，意味着它可以存储任何类型的数据
    const profile = ref<any>()

    // 保存会员信息的方法，当用户登录时使用，接收一个任意类型的参数 val
    const setProfile = (val: any) => {
      profile.value = val // 将传入的值赋给 profile 响应式引用的 value 属性，以更新会员信息
    }

    // 清理会员信息的方法，当用户退出时使用
    const clearProfile = () => {
      profile.value = undefined // 将 profile 响应式引用的值设置为 undefined，以清除会员信息
    }

    // 记得返回一个包含 Store 状态和方法的对象
    return {
      profile, // 返回 profile 响应式引用，以便外部可以访问会员信息
      setProfile, // 返回 setProfile 方法，以便外部可以设置会员信息
      clearProfile, // 返回 clearProfile 方法，以便外部可以清除会员信息
    }
  },
  // TODO: 持久化，下面是关于 Store 持久化的配置
  {
    // 网页端和小程序端的持久化配置
    persist: {
      // 配置如何存储和读取数据，这里使用的是与平台无关的 API
      storage: {
        // 获取存储的项
        getItem: (key: string) => {
          return uni.getStorageSync(key) // 调用 uni.getStorageSync 方法从持久化存储中获取键对应的值
        },
        // 设置存储项
        setItem: (key: string, value: any) => {
          uni.setStorageSync(key, value) // 调用 uni.setStorageSync 方法将值存储到持久化存储中
        },
      },
    },
    // persist: true // 这是另一种简化配置，如果设置为 true，将使用默认的本地存储机制进行持久化
  },
)